<template>
	<view class="page-wrap padding">
		<view class="page-cont">
			<view class="title-wrap" @click="handleShow">
				<view v-if="ruleForm.title">
					<text>{{ruleForm.title}}</text>
				</view>
				<view v-else>
					<text>输入视频名称 0/</text><text style="color:#07c160">10</text>
				</view>
			</view>
			<view class="video-wrap">
				<view class="video-cont" v-if="ruleForm.video_url">
					<video controls object-fit="contain" :show-mute-btn="true" :enable-play-gesture="true" :src="ruleForm.video_url" :poster="ruleForm.img" style="width:100%;height: 100%;"
					 @error="videoError" />
				</view>
				<view class="video-cont" @click.stop="chooseVideo" v-else>
					<view class="video-cont-upload" v-if="showLoad">
						<text >正在上传，请耐心等待...</text>
						<view class="cu-progress round margin-top-sm striped" :class="active?'active':''">
							<view class="bg-black" :style="[{width:uploadInfo.progress+'%'}]"></view>
						</view>
					</view>
					
					<view class="video-cont-upload" v-else>
						<image src="/static/images/publish/play.png" />
						<view style="color:#343436;font-size: 28rpx;" class="margin-top-sm">
							<text>上传视频</text>
						</view>
					</view>
				</view>
			</view>
			<view class="setting-wrap">
				<h-multi-tags title="设置标签（多选）" :list.sync="tagList" labelKey="title" :value.sync="ruleForm.tags"/>
				<h-multi-tags title="选择视频集" :list.sync="categoryList" labelKey="title" :value.sync="ruleForm.videos_category_id" type="radio"/>
			</view>
		</view>
		<view class="btn-wrap margin-top-sm">
			<button class="cu-btn round" style="background-color: #000;width: 200rpx;" @click="handleCreate">新建视频集</button>
			<button :class="['cu-btn','round','bg-red','animation',animationType]" style="width:340rpx" @click="handlePublish">发布</button>
		</view>

		<h-popup type="bottom-modal" :show.sync="showTitlePopup">
			<view class="title-popup-wrap padding">
				<view class="input-wrap">
					<input placeholder="输入视频名称" placeholder-class="text-sm" maxlength="10" v-model="titleCopy"></input>
				</view>
				<view class="btn-wrap">
					<button class="cu-btn bg-red round margin-lr-sm" style="padding:0 80rpx" @click="handleConfirm">确定</button>
					<button class="cu-btn round margin-lr-sm" style="padding:0 80rpx;color:#000" @click="handleCancel">取消</button>
				</view>
			</view>
		</h-popup>
	</view>
</template>

<script>
	import HPopup from "@/components/HPopup"
	import HMultiTags from "@/components/HMultiTags"
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				id:0,//视频id
				tagList: [], //选项
				categoryList: [], //选项
				showTitlePopup: false,
				video_src: "",
				titleCopy: "",
				animationType: "",
				active: false,
				loadProgress: 0,
				showLoad: false,//判断是否在上传
				ruleForm: {
					videos_category_id: "",
					title: "",
					video_url: "",
					tags: "",
					img: "",
					duration: ""
				},
				rules: {
					title: [{
						msg: '标题不能为空',
						required: true
					}],
					video_url: [{
						msg: '视频不能为空',
						required: true
					}],
					duration: [{
						msg: '视频时长不能为空',
						required: true
					}],
					tags: [{
						msg: '标签不能为空',
						required: true
					}],
					videos_category_id: [{
						msg: '视频集不能为空',
						required: true
					}]
				}
			}
		},
		computed:{
			...mapState("app",["uploadInfo"])
		},
		components: {
			HMultiTags,
			HPopup
		},
		methods: {
			async getTagList() {
				let {
					data
				} = await this.$h.api.videoModel.getVideoTags()
				return data.map(item=>({
					...item,
					checked:false
				}))
			},
			async getCategoryList() {
				let {
					data
				} = await this.$h.api.videoModel.getCategorys()
				return data.map(item=>({
					...item,
					checked:false
				}))
			},
			async getVideoDetail(id){
				let query={
					id
				}
				let {data}=await this.$h.api.videoModel.getVideoDetail(query)
				let {video_url,title,duration,tag_ids,videos_category_id}=data[0]
				this.ruleForm={
					video_url,title,duration:this.$h.utils.getDuration(duration),tags:tag_ids.join(','),videos_category_id
				}
				this.titleCopy=title
				if(tag_ids.length){
					tag_ids.forEach(id=>{
						this.tagList.forEach((item,index)=>{
							if(item.id===id){
								this.$set(this.tagList,index,{
									...this.tagList[index],
									checked:true
								})
							}
						})
					})
				}
			},
			handleShow() {
				this.showTitlePopup = true
			},
			handleCreate() {
				this.$h.toast('功能未开放')
			},
			async chooseVideo() {
				let a = await this.$h.lib.chooseVideo()
				console.log(a)
				let {
					duration,
					tempFilePath
				}=a
				this.ruleForm.duration = ~~duration
				this.video_src = tempFilePath
				let query = {
					video_time: this.ruleForm.duration?this.ruleForm.duration:1
				}
				this.showLoad=true
				let {
					code,
					data
				} = await this.$h.uploadFile('video', this.video_src, query)
				if (code === 1) {
					this.$h.toast('上传成功', true).then(() => {
						this.showLoad=false
						this.ruleForm.video_url = data.src
					})
				} else {
					this.$h.toast('上传失败')
				}
			},
			//发布
			async handlePublish() {
				if(this.id){
					let res = await this.$h.utils.validateForm(this.ruleForm, this.rules)
					if (res) {
						let query = {
							...this.ruleForm,
							id:this.id
						}
						let {
							code
						} = await this.waitingLoading(this.$h.api.videoModel.postVideoUpdate)(query)
						if (code === 1) {
							this.$h.toast('修改成功', true).then(() => {
								this.$h.router.back()
							})
						}
					} else {
						this.animationType = 'animation-shake'
						setTimeout(() => {
							this.animationType = ''
						}, 500);
					}
				}else{
					let res = await this.$h.utils.validateForm(this.ruleForm, this.rules)
					if (res) {
						let query = {
							...this.ruleForm
						}
						let {
							code
						} = await this.waitingLoading(this.$h.api.videoModel.publishVideo)(query)
						if (code === 1) {
							this.$h.toast('发布成功', true).then(() => {
								this.$h.router.back()
							})
						}
					} else {
						this.animationType = 'animation-shake'
						setTimeout(() => {
							this.animationType = ''
						}, 500);
					}
				}
			},
			handleConfirm() {
				this.ruleForm.title = this.titleCopy
				this.handleCancel()
			},
			handleCancel() {
				this.showTitlePopup = false
			},
		},
		onLoad({id}) {
			this.id=id
			Promise.all([this.getTagList(), this.getCategoryList()]).then(res => {
				this.tagList = res[0]
				this.categoryList = res[1]
				//判断是否是我的视频编辑
				if(id){
					this.getVideoDetail(id)
				}
			})
		}
	}
</script>
<!-- 小程序兼容样式，h5可以将page写在scss中 -->
<style>
	page {
		background: url("https://hansu-1253325863.cos.ap-shanghai.myqcloud.com/weixinVideo/publish_bg.png") no-repeat;
		background-size: cover;
		background-origin: content-box;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
<style lang="scss" scoped>
	.error-msg {
		font-size: 24rpx;
		line-height: 20rpx;
		color: red;
		margin-top: 10rpx;
	}

	.page-wrap {
		width: 650rpx;
		height: 1100rpx;
		@include df-col() background-color: #fff;
		border-radius: 10rpx;

		.page-cont {
			flex: 1;
			@include df-col();

			.title-wrap {
				@include df-row($jc: center, $ai:center);
				height: 100rpx;

				font: {
					size: 28rpx;
					weight: 300;
				}

				color:rgba(153, 153, 153, 1)
			}

			.video-wrap {
				width: 100%;
				height: 300rpx;

				.video-cont {
					width:100%;
					height: 100%;
					@include df-col($jc: center, $ai:center);
					&-upload{
						width:100%;
						@include df-col($jc: center, $ai:center);
						image {
							@include build-square(100rpx)
						}
					}
				}
			}
		}

		.btn-wrap {
			@include df-row($jc: space-between);

			button {
				color: #fff;
				height: 80rpx;
				line-height: 80rpx;

				font: {
					size: 28rpx;
					weight: 500;
				}
			}
		}

		.title-popup-wrap {
			@include df-col() .input-wrap {
				padding: 20rpx 0;
				margin: 30rpx 0 120rpx 0;
				font-size: 28rpx;
				border-bottom: 2rpx solid #eee;
			}

			.btn-wrap {
				@include df-row($jc: center)
			}
		}
	}
</style>
